import React, { PureComponent } from 'react';
import { BackHandler, Text, Image } from 'react-native';
import {
    createStackNavigator,
    createSwitchNavigator,
    createBottomTabNavigator,
    NavigationActions
} from 'react-navigation';
import {
    reduxifyNavigator,
    createReactNavigationReduxMiddleware,
    createNavigationReducer,
} from 'react-navigation-redux-helpers'
import { connect } from 'react-redux'
import { Colors } from './style'
import { default as Images } from './images';

//页面
import Login from './containers/Login';
import Home from './containers/Home';
import Coach from './containers/Coach';
import Mine from './containers/Mine';
import Welcome from './containers/Welcome';
import Register from './containers/Register';
import CompleteInfo from './containers/CompleteInfo';
import ShopDetail from './containers/ShopDetail';
import CoachDetail from './containers/Coach/CoachDetail';
import ClassDetail from './containers/ClassDetail';
// TabBar Label Icon 快速构造
const tabBarLabel = ({ title }) => {
    return ({ focused, tintColor }) => {
        return (
            <Text style={{
                color: focused ? Colors.orange : Colors.black,
                fontSize: 12,
                marginLeft: 3 // 文字居中的补充边距
            }}>{title}</Text>
        )
    }
}
const tabBarIcon = ({ icon, iconSelected }) => {

    return ({ focused }) => {
        return <Image style={{
            width: 25, height: 25
        }}
            source={focused ? iconSelected : icon}
        />
    }
}

const HomePageStack = createStackNavigator({
    screen: Home
})
const coachPageStack = createStackNavigator({
    screen: Coach
})
const minePageStack = createStackNavigator({
    screen: Mine
}, {
        headerMode: 'none'
    })

// Tab bar 文字、图片配置
HomePageStack.navigationOptions = {
    tabBarLabel: tabBarLabel({ title: '首页' }),
    tabBarIcon: tabBarIcon({
        icon: Images.homeUnSelect,
        iconSelected: Images.homeSelect
    })
}

coachPageStack.navigationOptions = {
    tabBarLabel: tabBarLabel({ title: '教练' }),
    tabBarIcon: tabBarIcon({
        icon: Images.coachUnSelect,
        iconSelected: Images.coachSelect
    })
}

minePageStack.navigationOptions = {
    tabBarLabel: tabBarLabel({ title: '个人' }),
    tabBarIcon: tabBarIcon({
        icon: Images.mineUnSelect,
        iconSelected: Images.mineSelect
    })
}

const TabNavigator = createBottomTabNavigator({
    HomeTab: { screen: HomePageStack },
    coachTab: { screen: coachPageStack },
    MineTab: { screen: minePageStack },
}, {
        tabBarOptions: {
            showIcon: true,
            labelStyle: {
                color: Colors.orange,
            },
            tabStyle: {
                backgroundColor: Colors.white,
                alignItems: 'center',
            },
            style: {
                borderTopColor: Colors.black,
                // borderWidth: 1,
                borderTopWidth: 1,
                backgroundColor: Colors.white
            }
        }
    })

TabNavigator.navigationOptions = {
    header: null
}

// const MainNavigator = createStackNavigator({
//     Tab: { screen: TabNavigator, },
//     ClassDetail: { screen: ClassDetail },
//     CoachDetail: { screen: CoachDetail },
//     ShopDetail: { screen: ShopDetail },
// })

// const LoginNavigator = createStackNavigator({
//     Welcome: { screen: Welcome, navigationOptions: { header: null } },
//     Login: { screen: Login },
//     Register: { screen: Register },
//     CompleteInfo: { screen: CompleteInfo },
// })

const AppNavigator = createStackNavigator(
    {
        Welcome: { screen: Welcome, navigationOptions: { header: null } },
        Login: { screen: Login },
        Register: { screen: Register },
        CompleteInfo: { screen: CompleteInfo },
        Main: { screen: TabNavigator, },
        ClassDetail: { screen: ClassDetail },
        CoachDetail: { screen: CoachDetail },
        ShopDetail: { screen: ShopDetail },
    }, {
        headerMode: 'none',
    }
)

export const routerReducer = createNavigationReducer(AppNavigator)
export const routerMiddleware = createReactNavigationReduxMiddleware(
    'root',
    state => state.router
)
const App = reduxifyNavigator(AppNavigator, 'root')


@connect(({ app, router }) => ({ app, router }))
class Router extends PureComponent {
    componentWillMount() {
        BackHandler.addEventListener('hardwareBackPress', this.backHandle)
    }

    componentWillUnmount() {
        BackHandler.removeEventListener('hardwareBackPress', this.backHandle)
    }

    backHandle = () => {
        const currentScreen = getActiveRouteName(this.props.router)
        console.log(currentScreen);
        if (currentScreen !== 'screen' && currentScreen !== 'Welcome') {
            this.props.dispatch(NavigationActions.back())
            return true
        }
        // this.props.dispatch(NavigationActions.back())
        return false
    }

    render() {
        const { app, dispatch, router } = this.props
        // if (app.loading) return <Loading />

        return <App dispatch={dispatch} state={router} />
    }
}

function getActiveRouteName(navigationState) {
    if (!navigationState) {
        return null
    }
    console.log(navigationState);
    const route = navigationState.routes[navigationState.index]
    if (route.routes) {
        return getActiveRouteName(route)
    }
    return route.routeName
}

export default Router